建立專案

建議使用 git 進行版本控制

在安裝 node.js 的時候會一起安裝套件管理器 npm ，我們要透過 npm 來管理專案所使用的套件，所以要進行專案初始化，在 cmd 中輸入下方指令：

npm init

此時會需要填入一些專案的相關資訊：

1. package name：輸入專案名稱，若沒有填則預設使用資料夾名稱
2. version：版本號，若沒有填則預設 1.0.0
3. description：專案的詳細介紹，可不填
4. entry point：專案的程式載入點，若沒有填則預設 index.js
5. test command：專案測試用的指令，可不填
6. git repository：輸入 git 遠端位址，可不填
7. keywords：輸入專案相關的關鍵字，可不填
8. author：輸入專案作者名稱，可不填
9. license：授權相關，若沒有填則預設ISC

填寫完畢後，會新增了一個 package.json 檔案，這個檔案非常重要，它會記錄使用的套件，更可以透過此檔案設定 npm 的腳本來輔助開發，這部分後面會再說明。

安裝 TypeScript

透過 npm 進行安裝，若沒有在全域安裝過，則要先行安裝，因為會使用到 TypeScript 的指令：

npm install -g typescript

以專案的角度來說， TypeScript 只是開發上需要，所以歸類在開發套件即可：

npm install typescript --save-dev

接著，要透過 TypeScript 的指令進行初始化：

tsc --init

此時會多一個 tsconfig.json 檔案，這個檔案是用來設定編譯選項的，這邊提供我的配置給大家參考：

{
  "compilerOptions": {
    "incremental": true,               // 啟用增量編譯
    "target": "ES2017",                // 編譯成指定的 JavaScript 版本
    "module": "commonjs",              // 指定編譯成何種模組
    "declaration": true,               // 產生 '.d.ts' 檔
    "sourceMap": true,                 // 產生 '.map' 檔
    "outDir": "./dist",                // 指定編譯後的檔案存放點
    "rootDir": "./src",                // 載入點的位置
    "removeComments": true,            // 移除註解
    "strict": true,                    // 採用嚴格模式
    "baseUrl": "./src",                // 指定匯入檔案的基準路徑
    "esModuleInterop": true,           // 兼容模組
    "experimentalDecorators": true,    // 啟用裝飾器
    "emitDecoratorMetadata": true      // 提供裝飾器 metadata
  },
  "include": ["src/**/*.ts"],          // 納入編譯範圍
  "exclude": ["node_modules", "dist"]  //不納入編譯範圍
}

詳細的配置可以參考官方文檔

安裝 Express

透過 npm 來替專案新增 Express，輸入指令：

npm install express

可以看到 package.json 中 的 dependencies 多了 express，表示安裝成功。接著要取得 node.js 與 express 的 type 定義檔，在開發時能夠清楚知道有哪些功能可以使用：

npm install @types/node @types/express --save-dev

新增 index.ts 並輸入下方的範例程式碼來架設簡單的 Express App 吧！先將資料夾結構調整如下：

├── src
|   └── index.ts
├── package.json
└── tsconfig.json

import express from 'express';

const app = express();

app.get('/', (req, res, next) => {
    res.send('Hello, World!!');
});

app.listen(3000, () => console.log('http server is running at port 3000.'));

建立完畢後，無法直接透過 node.js 來啟動它，必須要編譯過後才能透過 node.js 啟動，但每次要測試都要執行一次編譯實在太麻煩了，所以我們安裝 ts-node 來解決這個問題：

npm install ts-node --save-dev

安裝完畢後，去更改一下 package.json 的配置，我們要透過 npm 的腳本來啟動 Express 專案，在 package.json 中的 script 欄位添加 start 項目：

"scripts": {
  "start:dev": "ts-node ./src/index.ts"
}

接著在 cmd 中輸入以下指令來啟動專案：

npm run start:dev

啟動成功後，可以在瀏覽器中輸入 http://localhost:3000 來檢視結果。

編譯

那要如何對專案進行編譯呢？畢竟 ts-node 並不適合用在正式環境中，還是需要編譯成 JavaScript 再透過 node.js 來啟動，所以修改一下 package.json 的內容：

"scripts": {
  "start": "npm run build && node ./dist/index.js",
  "start:dev": "ts-node ./src/index.ts",
  "build": "tsc"
}

每次要編譯並啟動正式環境就執行：

npm start

其原理很簡單，根據專案的 tsconfig.json 進行編譯，完成後再透過 node.js 來啟動。

自動化

在開發階段的啟動方式有個小問題，就是每當更改程式碼的時候，它並 不會自動刷新 ，需要關掉以後再執行一次 npm run start:dev，身為一個 IT 人怎麼可以忍受這種事情！所以我們要透過強大的 nodemon 來解決：

npm install nodemon --save-dev

安裝完畢後，去更改 package.json 的配置：

"scripts": {
  "start": "npm run build && node ./dist/index.js",
  "start:dev": "nodemon --exec ts-node ./src/index.ts",
  "build": "tsc"
}

如此一來，只需要執行一次 npm run start:dev 就可以了，不必每次更改程式碼就執行一次，是不是很方便呢！

環境變數

那如果想要讓 開發環境(development) 跟 正式環境(production) 用不同的環境變數要怎麼做呢？這時候我們就需要使用 dotenv 來管理環境變數：

npm install dotenv

我們將環境變數的檔案分成 development.env 與 production.env，並調整專案結構：

.
├── src
|   ├── index.ts
|   └── environments
|       ├── development.env
|       └── production.env
├── package.json
└── tsconfig.json

development.env 的內容：

PORT=3000

production.env的內容：

PORT=8080

接著透過 npm 的腳本傳入參數來指定現在的環境是 development 還是 production：

"scripts": {
  "start": "npm run build && NODE_ENV=production node ./dist/index.js",
  "start:dev": "nodemon --exec NODE_ENV=development ts-node ./src/index.ts",
  "build": "tsc"
}

最後就是去調整 index.ts 的內容，透過 NODE_ENV 參數 與 dotenv 來選定環境變數：

import express from 'express';
import path from 'path';
import dotenv from 'dotenv';

const app = express();

// 動態選擇環境變數的檔案
dotenv.config({ path: path.resolve(__dirname, `./environments/${ process.env.NODE_ENV }.env`) });

app.get('/', (req, res, next) => {
    res.send('Hello, World!!');
});

app.listen(process.env.PORT, () => console.log(`http server is running at port ${ process.env.PORT }.`));

如果使用 git 的話，建議 env 檔案都不要 commit，通常 env 裡面會放一些敏感資訊，如：資料庫的密碼。

小結

今天的內容主要是在建置開發環境，並簡單實作了 Express App，這些步驟都可以替後面開發省下很多力氣，特別是自動化的部分，nodemon 真是個好發明呢！

我個人認為動態選擇環境變數也是很重要的功能，因為在開發的時候可能會有不同的資料庫，比如說：正式機的資料庫、開發用的測試資料庫等，都會有不同的敏感資訊，這時候用這樣的切換方式可以花 最少的成本做到最便利的事情 ，值得學習！

下一篇將會開始去了解 Express 的基本用法與路由，敬請期待！